<template>
  <div id="appManagePage">
    <a-form layout="inline" :model="query" @finish="fetchData">
      <a-form-item label="名称">
        <a-input v-model:value="query.appName" placeholder="输入应用名称" />
      </a-form-item>
      <a-form-item label="类型">
        <a-input v-model:value="query.codeGenType" placeholder="react/vue3" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>
    <a-divider />
    <a-table :columns="columns" :data-source="data" :pagination="pagination" @change="onTableChange">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex==='index'">
          {{ ((query.pageNum ?? 1) - 1) * (query.pageSize ?? 10) + index + 1 }}
        </template>
        <template v-else-if="column.dataIndex==='cover'">
          <a-image :src="record.cover" :width="120" />
        </template>
        <template v-else-if="column.key==='action'">
          <a-space>
            <a-button size="small" @click="goEdit(record.id)">编辑</a-button>
            <a-button danger size="small" @click="doDelete(record.id)">删除</a-button>
            <a-button size="small" @click="setFeatured(record.id)">精选</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { deleteApp, listApps, updateApp } from '@/api/appController.ts'
import { useRouter } from 'vue-router'

const router = useRouter()

const columns = [
  { title: '序号', dataIndex: 'index', width: 80 },
  { title: '名称', dataIndex: 'appName' },
  { title: '封面', dataIndex: 'cover' },
  { title: '优先级', dataIndex: 'priority' },
  { title: '类型', dataIndex: 'codeGenType' },
  { title: '创建人', dataIndex: ['user','userName'] },
  { title: '创建时间', dataIndex: 'createTime' },
  { title: '操作', key: 'action' },
]

const data = ref<API.AppVO[]>([])
const total = ref(0)
const query = reactive<API.AppQueryRequest>({ pageNum: 1, pageSize: 10 })

const pagination = computed(() => ({
  current: query.pageNum ?? 1,
  pageSize: query.pageSize ?? 10,
  total: total.value,
  showSizeChanger: true,
  showQuickJumper: true,
}))

const onTableChange = (p:{current:number,pageSize:number})=>{
  query.pageNum = p.current
  query.pageSize = p.pageSize
  fetchData()
}

const fetchData = async () => {
  const res = await listApps({ ...query })
  if (res.data.data) {
    data.value = res.data.data.records ?? []
    total.value = res.data.data.totalRow ?? 0
  }
}

const goEdit = (id?: any) => { if(!id) return; router.push(`/app/edit/${id}`) }

const doDelete = async (id?: any) => {
  if (!id) return
  const res = await deleteApp({ id: id as any })
  if (res.data.code === 0) {
    message.success('删除成功')
    fetchData()
  } else {
    message.error('删除失败：' + res.data.message)
  }
}

const setFeatured = async (id?: any) => {
  if (!id) return
  const res = await updateApp({ id: id as any, priority: 99 })
  if (res.data.code === 0) {
    message.success('已设为精选')
    fetchData()
  } else {
    message.error('设置失败：' + res.data.message)
  }
}

onMounted(fetchData)
</script>

<style scoped></style>


